import QtQuick 1.0

Item {
    id: idOpenButton
    width: 38

    Image {
        id: idButtonUp
        source: "art/2downarrow.png"
        width: 48
        height: 48
        smooth: true
        opacity: 1
        Behavior on opacity {  NumberAnimation { duration: 100  } }
    }

    Image {
        id: idButtonDown
        source: "art/2uparrow.png"
        width: 48
        height: 48
        smooth: true
        opacity: 0
        Behavior on opacity {  NumberAnimation { duration: 100  } }
    }

    signal down
    signal up

    Behavior on opacity { NumberAnimation { duration: 100  } }
    MouseArea {
        id: mouseRegion
        anchors.fill: parent
        onClicked: {
            idOpenButton.state = idOpenButton.state == "Down" ? "Up" : "Down"
        }
    }

    states: [
        State {
            name: "Down"
            PropertyChanges { target: idButtonUp; opacity: 0 }
            PropertyChanges { target: idButtonDown; opacity: 1 }
            StateChangeScript {
                script: idOpenButton.down();
            }
        },
        State {
            name: "Up"
            PropertyChanges { target: idButtonUp; opacity: 1 }
            PropertyChanges { target: idButtonDown; opacity: 0 }
            StateChangeScript {
                script: idOpenButton.up();
            }

        }
    ]
}
